<template>
    <n-grid :x-gap="20" :y-gap="20" :cols="2">
        <n-grid-item>
            <n-card title="季度销售趋势图" size="medium">
                <div class="chart" id="bar">
                </div>
            </n-card>
        </n-grid-item>
        <n-grid-item>
            <n-card title="季度销售趋势图" size="medium">
                <div class="chart" id="line">
                </div>
            </n-card>
        </n-grid-item>
        <n-grid-item>
            <n-card title="季度销售趋势图" size="medium">
                <div class="chart" id="earth">
                </div>
            </n-card>
        </n-grid-item>
        <n-grid-item>
            <n-card title="季度销售趋势图" size="medium">
                <div class="chart" id="">
                </div>
            </n-card>
        </n-grid-item>

    </n-grid>
    
</template>

<script setup>
import * as echarts from 'echarts';
import bar from './options/bar';
import line from './options/line';
import earth from './options/earth';
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('bar'));
    // 绘制图表
    myChart.setOption(bar);
    // 绘制折线图
    var lineChart = echarts.init(document.getElementById('line'));
    lineChart.setOption(line);
    
    var earthChart = echarts.init(document.getElementById('earth'));
    earthChart.setOption(earth);
})

</script>

<style lang="scss" scoped>
.chart{
    height: 230px;
}
</style>